<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>X-editable starter template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- bootstrap  -->
	<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
	<link href="css/bootstrap.cerulean.css" rel="stylesheet">
	
    <script src="js/jquery-1.9.1.min.js"></script> 
    <script src="js/bootstrap.min.js"></script>
    <!--<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>  -->

    <!-- x-editable (bootstrap version) -->
	<link href="css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="js/bootstrap-editable.js"></script>
    <!-- <link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/css/bootstrap-editable.css" rel="stylesheet"/>
    <script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.4.6/bootstrap-editable/js/bootstrap-editable.min.js"></script> -->
    
	<!-- moment.min.js -->	
    <script src="js/moment.min.js"></script>	
	
	<!-- demo resources -->
    <script src="js/demo/demo-mock.js"></script>
    <!-- <script src="js/demo/demo.js"></script> -->
	<script src="js/demo/jquery.mockjax.js"></script>			
	
    <!-- main.js -->
    <script src="js/main.js"></script>
  </head>
  <body>
		<div class="container" style="width:80%;margin:auto">
			<h1>X-editable starter template</h1>
			<form id="frm" class="form-inline" action="demo.html" method="get">
				<label>
					<span>Form Style:</span>
					<select id="f" class="form-control">
						<option value="bootstrap3">BS 3</option>
						<option value="plain">Plain</option>
					</select>
				</label>
				<label style="margin-left:30px">
					Mode:
					<select id="c" name="c" class="form-control">
						<option value="popup">popup</option>
						<option value="inline">inline</option>
					</select>
				</label>
			</form>
		</div>
		<div style="height:35px"></div>
		<div class="container">						
			<div>
				<span>Username:</span>
				<a href="#" id="username" data-type="text" data-placement="right" data-title="Enter username">superuser</a>
			</div>      
			<div>
				<span>Status:</span>
				<a href="#" id="status"></a>
			</div>      
		  
			<div>         
				<span>Combodate (date):</span>
				<a data-title="Select Date of birth" data-pk="1" data-template="D / MMM / YYYY" data-viewformat="DD/MM/YYYY" data-format="YYYY-MM-DD" data-value="1984-05-15" data-type="combodate" id="dob" href="#" class="editable editable-click">15/05/1984</a>
			</div> 
		</div>
		
		<div style="height:50px"></div>
		<div class="container">
			<table style="clear: both" class="table table-striped table-bordered table-hover" id="user">
					<tbody> 
						<tr>         
							<td width="35%">Simple text field</td>
							<td width="65%"><a data-title="Enter username" data-pk="1" data-type="text" id="username0" href="#" class="editable editable-click username">superuser</a></td>
						</tr>
						<tr>         
							<td>Empty text field, required</td>
							<td><a data-title="Enter your firstname" data-placeholder="Required" data-placement="right" data-pk="1" data-type="text" id="firstname" href="#" class="editable editable-click editable-empty">Empty</a></td>
						</tr>  
						<tr>         
							<td>Select, local array, custom display</td>
							<td><a data-title="Select sex" data-value="" data-pk="1" data-type="select" id="sex" href="#" class="editable editable-click" style="color: gray;">not selected</a></td>
						</tr>
						<tr>         
							<td>Select, remote array, no buttons</td>
							<td><a data-title="Select group" data-source="/groups" data-value="5" data-pk="1" data-type="select" id="group" href="#" class="editable editable-click">Admin</a></td>
						</tr> 
						<tr>    <!-- tbl-status -->     
							<td>Select, error while loading</td>
							<!--<td><a data-title="Select status" data-source="/status" data-value="0" data-pk="1" data-type="select" id="tbl-status" href="#" class="editable editable-click">Active</a></td>-->
							<td><a href="#" id="tbl-status"></a></td>
						</tr>  
							 
						<tr>         
							<td>Datepicker</td>
							<td>
							
							<span class="notready">not implemented for Bootstrap 3 yet</span>
							
							</td>
						</tr>
						<tr>         
							<td>Combodate (date)</td>
							<td><a data-title="Select Date of birth" data-pk="1" data-template="D / MMM / YYYY" data-viewformat="DD/MM/YYYY" data-format="YYYY-MM-DD" data-value="1984-05-15" data-type="combodate" id="dob" href="#" class="editable editable-click">15/05/1984</a></td>
						</tr> 
						<tr>         
							<td>Combodate (datetime)</td>
							<td><a data-title="Setup event date and time" data-pk="1" data-viewformat="MMM D, YYYY, HH:mm" data-format="YYYY-MM-DD HH:mm" data-template="D MMM YYYY  HH:mm" data-type="combodate" id="event" href="#" class="editable editable-click editable-empty">Empty</a></td>
						</tr>                                                              
											
						<tr>         
							<td>Textarea, buttons below. Submit by <i>ctrl+enter</i></td>
							<td><a data-title="Enter comments" data-placeholder="Your comments here..." data-pk="1" data-type="textarea" id="comments" href="#" class="editable editable-pre-wrapped editable-click">awesomeuser!</a></td>
						</tr> 
						
						<tr>         
							<td>Twitter typeahead.js</td>
							<td><a data-title="Start typing State.." data-placement="right" data-pk="1" data-type="typeaheadjs" id="state2" href="#" class="editable editable-click">California</a></td>
						</tr>                       
											 
															
						<tr>         
							<td>Checklist</td>
							<td><a data-title="Select fruits" data-value="2,3" data-type="checklist" id="fruits" href="#" class="editable editable-click">peach<br>apple</a></td>
						</tr>

						<tr>         
							<td>Select2 (tags mode)</td>
							<td><a data-title="Enter tags" data-pk="1" data-type="select2" id="tags" href="#" class="editable editable-click">html, javascript</a></td>
						</tr>                    

						<tr>         
							<td>Select2 (dropdown mode)</td>
							<td><a data-title="Select country" data-value="BS" data-pk="1" data-type="select2" id="country" href="#" class="editable editable-click">Bahamas</a></td>
						</tr>  
						
						<tr>         
							<td>Custom input, several fields</td>
							<td><a data-title="Please, fill address" data-pk="1" data-type="address" id="address" href="#" class="editable editable-click"><b>Moscow</b>, Lenina st., bld. 12</a></td>
						</tr>                      
																													
						
					</tbody>
				</table>
			</div>

  </body>
</html>